import { useState } from "react";
import { useMount } from "./use";



export const useRightMenu = () => app => {
  const [visibe, setVisibe] = useState(false)

  useMount(() => {
    const itemHandle = app.actions.itemHandle
    let rightMenu = [{ label: '选中/取消行', func: () => itemHandle.selectRowOrCol(0) },
      { label: '选中/取消列', func: () => itemHandle.selectRowOrCol(1) },
      { label: '复制选中', func:itemHandle.copySelect },
      {
        label: '显示日期', func: () => { 
          console.log('%c 🍋 显示日期: ', 'font-size:20px;background-color: #93C0A4;color:#fff;');
          itemHandle.setTimeDate(app.ctx.currentSelected[0])
        } },
      { label: '保留两位小数', func: () => itemHandle.setDataType(app.ctx.currentSelected[0]) },
      { label: '居左', func: () => () => itemHandle.setAlign("left",app.ctx.currentSelected[1]) },
      { label: '居中', func: () => itemHandle.setAlign("center",app.ctx.currentSelected[1]) },
      { label: '居右', func: () => itemHandle.setAlign("end",app.ctx.currentSelected[1]) }]
      app.ctx.rightMenu = rightMenu
  })

  return {
    props: (ctx) => {
      return {
        onContextMenu: (e) => {
          app.ctx.position = {
            top: e.pageY ,
            left: e.pageX 
          }
          setVisibe(true)
          app.actions.getViewData();
          e.preventDefault();
        },
        rightMenuProps: {
          menus: app.ctx.rightMenu ,
          show: visibe,
          position: app.ctx.position || {
            top: 0,
            left:0
          },
          onMouseLeave: () => {
            setVisibe(false)
          }
        }
      }
    }
  };
};
